<template>
  <div>
    <el-card class="statuscard">
      <div>
        <b align="left">全部主机状态</b> <br />
        <i class="el-icon-success" style="color: #00ff00" ></i>Ready {{ ok }} <br />
        <i class="el-icon-warning" style="color: #ff0000"></i>NotReady {{ notOk }}
      </div>
      <el-divider></el-divider>

      <el-table :data="tableData.pod_list" border height="500">
        <el-table-column label="编号" width="50">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index+1 }}</span>
          </template>
        </el-table-column>

        <el-table-column label="pod" width="180">
          <template slot-scope="scope">
            <!-- <i class="el-icon-time"></i> -->
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="状态" width="50">
          <template slot-scope="scope">
            <!-- <i class="el-icon-time"></i> -->
            <i class="el-icon-success" style="color: #00ff00" v-if="(scope.row.status == 1)"></i>
            <i class="el-icon-warning" style="color: #ff0000" v-else></i>
          </template>
        </el-table-column>

        <el-table-column label="所属集群名称" width="100">
          <template slot-scope="scope">
            <!-- <i class="el-icon-time"></i> -->
            <span style="margin-left: 10px">{{ scope.row.cluster_name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="cpu" width="100">
          <template slot-scope="scope">
            <!-- <i class="el-icon-time"></i> -->
            <span style="margin-left: 10px">{{ scope.row.cpu }}</span>
          </template>
        </el-table-column>

        <el-table-column label="内存" width="100">
          <template slot-scope="scope">
            <!-- <i class="el-icon-time"></i> -->
            <span style="margin-left: 10px">{{ scope.row.ram }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card class="hostcard">
      <div slot="header" class="info_hosts">
        <el-button
          type="primary"
          class="addhost"
          icon="el-icon-edit"
          @click="scanhost"
          >扫描主机</el-button>
        <!-- <addhost style="float: right; padding: 3px 0" @refreash="getinfo"> </addhost> -->
      </div>

      <div slot="header">
        <addHost></addHost>
      </div>

      <div>
        <el-table :data="tableData" height="700" border @row-click="clickData">
          <!-- <el-table :data="tableData" style="width: 100%"> -->
         <el-table-column label="ID" width="100">
          <template slot-scope="scope">
            <!-- <i class="el-icon-time"></i> -->
            <span style="margin-left: 10px">{{ scope.$index+1 }}</span>
          </template>
        </el-table-column>

          <el-table-column label="IP" width="150">
            <template slot-scope="scope">
              <!-- <i class="el-icon-time"></i> -->
              <span>{{ scope.row.ip }}</span>
            </template>
          </el-table-column>

          <el-table-column label="名称" width="100">
            <template slot-scope="scope">
              <!-- <i class="el-icon-time"></i> -->
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>

          <el-table-column label="状态" width="50">
            <template slot-scope="scope">
              <!-- <i class="el-icon-time"></i> -->
              <i class="el-icon-success" style="color: #00ff00" v-if="(scope.row.status == 1)"></i>
              <i class="el-icon-warning" style="color: #ff0000" v-else></i>
            </template>
          </el-table-column>

          <el-table-column label="cpu使用率" width="100">
            <template slot-scope="scope">
              <el-progress
                type="circle"
                :percentage="scope.row.cpu"
                :width="50"
              ></el-progress>
            </template>
          </el-table-column>

          <el-table-column label="内存使用率" width="100">
            <template slot-scope="scope">
              <el-progress
                type="circle"
                :percentage="scope.row.ram"
                :width="50"
              ></el-progress>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >下线</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>

        </el-table>
      </div>
    </el-card>

    <!-- <addhost @refreash="getinfo"> </addhost> -->
  </div>
</template>

<script>
import Axios from "axios";
import addHost from "../../components/addHost.vue";
export default {
  created() {
    this.getinfo();
  },
  data() {
    return {
      url: "",
      ok: "",
      notOk: "",
      tableData: [
        {
          id: "",
          ip: "",
          name: "",
          status: "",
          cpu: "",
          ram: "",
          create_at: "",
          update_at: "",
          pod_list: [
            {
              id: "",
              name: "",
              status: "",
              hosts_ip: "",
              cluster_name: "",
              cpu: "",
              ram: "",
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleEdit(index, row) {
      row["name"] = "红红";
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.url = "/hosts/delete/" + row["id"];
      Axios.get(this.url).then((res) => {
        // this.tableData = res.data.msg;
        console.log(res.data.msg);
        row = null;
        // this.getinfo();
      });
    },
    getinfo: function () {
      Axios.get("/hosts").then((res) => {
        this.tableData = res.data.msg;
        this.ok = res.data.ok;
        this.notOk = res.data.notOk;
      });
    },
    scanhost: function () {
      Axios.get("hosts/refresh").then((res) => {
        this.tableData = res.data.msg;
        this.ok = res.data.ok;
        this.notOk = res.data.notOk;
        location.reload();
      });
    },
    clickData(row) {
      this.tableData = row;
      console.log(row);
    },
  },
  components: { addHost },
};
</script>

<style scoped>
.statuscard {
  position: absolute;
  left: 50px;
  top: 100px;
  width: 600px;
  height: 80%;
}
.hostcard {
  position: absolute;
  left: 700px;
  top: 100px;
  width: 800px;
  height: 80%;
}
</style>